<template>
    <div class="cart">
        <div class="imgbox">
            <img src="../../assets/img/团队logo.jpg" width="135px" height="135px"/>
        </div>
        <el-menu :default-active="activeIndex" class="el-menu-demo nva_style" mode="horizontal" @select="handleSelect">
            <el-row>
                <el-col :span="7">
                    <div class="grid-content"></div>
                </el-col>
                <!--                <el-col :span="12">-->
                <!--                    <h1 class="">半点时光甜品店</h1>-->
                <!--                </el-col>-->
                <el-col :span="2">
                    <el-menu-item index="4" @click="uindex()">首页</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-menu-item index="4" @click="movies()">稻瘟病</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-menu-item index="4" @click="books()">白叶枯病</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-menu-item index="4" @click="musics()">水稻曲病</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-submenu index="2">
                        <template slot="title">购物车</template>
                        <el-menu-item index="2-2" @click="edit()">信息修改</el-menu-item>
                        <el-menu-item index="2-3" @click="loginOut()">退出登录</el-menu-item>
                    </el-submenu>
                </el-col>
                <el-col :span="3">
                </el-col>
            </el-row>
        </el-menu>

        <div class="cart-header">
            <div class="cart-header-title">购物清单</div>
            <div class="cart-header-main">
                <div class="cart-info">商品信息</div>
                <div class="cart-price">单价</div>
                <div class="cart-count">数量</div>
                <div class="cart-cost">小计</div>
                <div class="cart-delete">删除</div>
            </div>
        </div>

        <div class="cart-content">
            <!-- 列表显示购物清单 -->
            <div class="cart-content-main">
                <div class="cart-info">
                    <img :src="tableData.moviePoster">
                    <span>{{tableData.movieName}}</span>
                </div>
                <div class="cart-price">
                    ￥ {{tableData.movieClassId}}
                </div>
                <div class="cart-count">
                    <span class="cart-control-minus"
                          @click="handleCount()">-</span>
                        {{msg}}
                    <span class="cart-control-add"
                          @click="handleCountAdd()">+</span>
                </div>
                <div class="cart-cost">
                    ￥ {{tableData.movieClassId * this.msg}}
                </div>
<!--                <div class="cart-delete">-->
<!--                    <span class="cart-control-delete"-->
<!--                          @click="handleDelete(index)">删除</span>-->
                </div>
            </div>
<!--        </div>-->
<!--        <div class="cart-footer" v-show="cartList.length">-->
<!--            <div class="cart-footer-desc">-->
<!--                共计 <span>{{countAll}}</span>-->
<!--            </div>-->
<!--            <div class="cart-footer-desc">-->
<!--                应付总额 <span>{{costAll - promotion}}</span>-->
<!--                <br>-->
<!--                <template v-if="promotion">-->
<!--                    (优惠<span>￥ {{promotion}} </span>)-->
<!--                </template>-->
<!--            </div>-->
            <div class="cart-footer-desc">
                <div class="cart-control-order"
                     @click="handleOrder">现在结算</div>
            </div>
<!--        </div>-->

    </div>
</template>

<script>
    import axios from 'axios'
    const clickoutside = {
        bind(el, binding, vnode) {
            function documentHandler(e) {
                if (el.contains(e.target)) {
                    return false;
                }
                if (binding.expression) {
                    binding.value(e);
                }
            }
            el.vueClickOutside = documentHandler;
            document.addEventListener('click', documentHandler);
        },
        update() {},
        unbind(el, binding) {
            document.removeEventListener('click', el.vueClickOutside);
            delete el.vueClickOutside;
        },
    };
    export default {
        name: "Cart",
        data() {
            return {
                msg: "1",
                tableData:[],
                moviename: "龙猫",
                actor:"宫崎骏",
                m_class:"动画",
                number1:"123",
                number2:"321",
                introduce:"是由宫崎骏执导，日高法子、坂本千夏、糸井重里配音的动画电影，于1988年4月16日在日本上映。高清重制版于2018年12月14日在中国公映。该片讲述了草壁达郎的妻子草壁靖子生病住院后，他带着草壁皋月与四岁的妹妹草壁米回到乡间居住的故事",
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                btnShow: false,
                index:'0',
                replyComment:'',
                myName:'爱吃甜品的猫',
                myHeader:'https://wx2.sinaimg.cn/mw690/0088yEhgly1ghdds49nuej306o06ogme.jpg',
                myId:19870621,
                to:'',
                toId:-1,
            }
        },
        mdirectives: {clickoutside},
        created() {
            var mid = this.$route.query.mid
            this.getData(mid)
        },
        methods: {
            getData(mid) {
                const _this=this
                axios.get("http://localhost:8083/cakes/getCakeOne/"+mid)
                    .then(response => {
                        if(response.data){
                            console.log(response.data);
                            this.tableData = [];
                            this.tableData = response.data;
                        }
                    })
                    .catch(error => {
                        console.log(error.message);
                        alert(error.message);
                    })
            },
            handleCount(){
                if(this.msg > 1)
                    this.msg--;
            },
            handleCountAdd(){
                this.msg++;
            },
            handleOrder(){
                this.$router.push('/u_pay_for_order');
            },
            regist(){
                this.$router.push('/u_regist');
            },
            uindex(){
                this.$router.push('/u_login_index');
            },
            movies(){
                this.$router.push('/u_movies');
            },
            books(){
                this.$router.push('/u_books');
            },
            musics(){
                this.$router.push('/u_musics');
            },

        }
    }
</script>

<style scoped>
    .imgbox{
        text-align: center;
    }
    .cart{
        margin: 32px;
        background: #fff;
        border: 1px solid #dddee1;
        border-radius: 10px;
    }
    .cart-header-title{
        padding: 16px 32px;
        border-bottom: 1px solid #dddee1;
        border-radius: 10px 10px 0 0;
        background: #f8f8f9;
    }
    .cart-header-main{
        padding: 8px 32px;
        overflow: hidden;
        border-bottom: 1px solid #dddee1;
        background: #eee;
        overflow: hidden;
    }
    .cart-empty{
        text-align: center;
        padding: 32px;
    }
    .cart-header-main div{
        text-align: center;
        float: left;
        font-size: 14px;
    }
    div.cart-info{
        width: 60%;
        text-align: left;
    }
    .cart-price{
        width: 10%;
    }
    .cart-count{
        width: 10%;
    }
    .cart-cost{
        width: 10%;
    }
    .cart-delete {
        width: 10%;
    }
    .cart-content-main{
        padding: 0 32px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-bottom: 1px dashed #e9eaec;
        overflow: hidden;
    }
    .cart-content-main div{
        float: left;
    }
    .cart-content-main img{
        width: 40px;
        height: 40px;
        position: relative;
        top: 10px;
    }
    .cart-control-minus,
    .cart-control-add{
        display: inline-block;
        margin: 0 4px;
        width: 24px;
        height: 24px;
        line-height: 22px;
        text-align: center;
        background: #f8f8f9;
        border-radius: 50%;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        cursor: pointer;
    }
    .cart-control-delete{
        cursor: pointer;
        color: #2d8cf0;
    }
    .cart-promotion{
        padding: 16px 32px;
    }
    .cart-control-promotion,
    .cart-control-order{
        display: inline-block;
        padding: 8px 32px;
        border-radius: 6px;
        background: #2d8cf0;
        color: #fff;
        cursor: pointer;
    }
    .cart-control-promotion{
        padding: 2px 6px;
        font-size: 12px;
        border-radius: 3px;
    }
    .cart-footer{
        padding: 32px;
        text-align: right;
    }
    .cart-footer-desc{
        display: inline-block;
        padding: 0 16px;
    }
    .cart-footer-desc span{
        color: #f2352e;
        font-size: 20px;
    }
</style>
